<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>loding加载动画</title>
		<style type="text/css">
			body {
			  padding: 0;
			  margin: 0;
			  background-color: salmon;
			  min-height: 100vh;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			}
			
			.loading {
			  width: 150px;
			  height: 150px;
			  position: relative;
			}
			
			.loading>span {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  /* style 中设置的变量，可以直接使用 */
			  transform: rotate(calc(var(--i) * 18deg));
			}
			
			.loading > span::before {
			  content: '';
			  position: absolute;
			  left: 0;
			  top: 0;
			  width: 10px;
			  height: 10px;
			  border-radius: 50%;
			  background-color: #fff;
			  animation: breath 2s linear infinite;
			  /* style 中设置的变量，可以直接使用 */
			  animation-delay: calc(var(--i) * 0.1s);
			}
			
			@keyframes breath {
			  0% {
			    transform: scale(0);
			  }
			  10% {
			    transform: scale(1.2);
			  }
			  100% {
			    transform: scale(0);
			  }
			}

		</style>
	</head>
	<body>
		<body>
		  <div class="loading">
		    <span style="--i: 0;"></span>
		    <span style="--i: 1;"></span>
		    <span style="--i: 2;"></span>
		    <span style="--i: 3;"></span>
		    <span style="--i: 4;"></span>
		    <span style="--i: 5;"></span>
		    <span style="--i: 6;"></span>
		    <span style="--i: 7;"></span>
		    <span style="--i: 8;"></span>
		    <span style="--i: 9;"></span>
		    <span style="--i: 10;"></span>
		    <span style="--i: 11;"></span>
		    <span style="--i: 12;"></span>
		    <span style="--i: 13;"></span>
		    <span style="--i: 14;"></span>
		    <span style="--i: 15;"></span>
		    <span style="--i: 16;"></span>
		    <span style="--i: 17;"></span>
		    <span style="--i: 18;"></span>
		    <span style="--i: 19;"></span>
		  </div>
		</body>

	</body>
</html>

